<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>播放器测试页面</title>
    <link href="/static/ctyunplayer.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <video id="ctyun-player" controls>
    </video>
    <div class="input-area" style="width: 720px;height: 30px;">
    	<input type="text" id="text">
    	<input type="button" value="发弹幕" id="btn">
    </div>
    <div id="test-button-area">
    	<input type="text" id="videoDuration"><button onclick="setPlayableVideoDuration()">设置可播放时长</button>
    	<input type="text" id="startAdUrl"><button onclick="setStartAd()">设置开头广告地址</button>
    	<input type="text" id="startAdId"><button onclick="setStartAdVideoId()">设置开头广告ID</button>
    	<input type="text" id="mainUrl"><button onclick="setUrl()">设置主视频地址</button>
    	<input type="text" id="posterUrl"><button onclick="setPoster()">设置封面图片地址</button>
    	<input type="text" id="endAdUrl"><button onclick="setEndAd()">设置结尾广告地址</button>
    	<input type="text" id="endAdId"><button onclick="setEndAdVideoId()">设置结尾广告ID</button>
    	<input type="text" id="pauseAdUrl"><button onclick="setPausedAd()">设置暂停广告图片地址</button>
    	<input type="text" id="seekSec"><button onclick="seekTo()">设置快进/快退时间（毫秒）</button>
    	<input type="text" id="volume"><button onclick="setVolume()">设置音量</button>
    	<input type="text" id="speed"><button onclick="setSpeed()">设置播放速率</button>
    	<button onclick="load()">加载视频</button>
    	<button onclick="play()">播放视频</button>
    	<button onclick="playNoAd()">播放视频（无广告）</button>
    	<button onclick="pause()">暂停视频</button>
    	<button onclick="stop()">结束播放</button>
    	<button onclick="getDuration()">获取视频时长</button>
    	<button onclick="getCurrentPosition()">获取已播时长</button>
    	<button onclick="getBufferedRange()">获取已缓存时间范围</button>
    	<button onclick="getBufferedEnd()">获取预加载时间点</button>
    	<button onclick="getBufferedPercentage()">获取已加载视频比值</button>
    	<button onclick="isMuted()">获取是否静音</button>
    	<button onclick="enterfullScreen()">进入全屏</button>
    	<button onclick="existFullScreen()">退出全屏</button>
    	<button onclick="isPlaying()">获取是否在播放</button>
    	<button onclick="isStop()">获取是否已停止播放</button>
    	<button onclick="isStartAdPlaying()">获取是否在播放开头广告</button>
    	<button onclick="isEndAdPlaying()">获取是否在播放结尾广告</button>
    	<button onclick="isPausedAdShow()">获取暂停广告是否在显示</button>
    	<button onclick="stopStartAd()">跳过开头广告</button>
    	<button onclick="stopEndAd()">跳过结尾广告</button>
    	<button onclick="hidePausedAd()">关闭暂停广告</button>
    </div>
    <script src="/static/ctyunplayer.js"></script>
    <script>
    let data = [
      { value: '1周杰伦的听妈妈的话，让我反复循环再循环', time: 1, color: 'red', speed: 1, fontSize: 22 },
      { value: '2想快快长大，才能保护她', time: 2, color: '#00a1f5', speed: 1, fontSize: 30 },
      { value: '3听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 3 },
      { value: '4周杰伦的听妈妈的话，让我反复循环再循环', time: 4, color: 'red', speed: 1, fontSize: 22 },
      { value: '5想快快长大，才能保护她', time: 5, color: '#00a1f5', speed: 1, fontSize: 30 },
      { value: '6听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 6 },
      { value: '7周杰伦的听妈妈的话，让我反复循环再循环', time: 7, color: 'red', speed: 1, fontSize: 22 },
      { value: '8想快快长大，才能保护她', time: 8, color: '#00a1f5', speed: 1, fontSize: 30 },
      { value: '9听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 9 },
      { value: '10周杰伦的听妈妈的话，让我反复循环再循环', time: 10, color: 'red', speed: 1, fontSize: 22 },
      { value: '11想快快长大，才能保护她', time: 11, color: '#00a1f5', speed: 1, fontSize: 30 },
      { value: '12听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 12 },
      { value: '13周杰伦的听妈妈的话，让我反复循环再循环', time: 13, color: 'red', speed: 1, fontSize: 22 },
      { value: '14想快快长大，才能保护她', time: 14, color: '#00a1f5', speed: 1, fontSize: 30 },
      { value: '15听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 15 },
    ];

    (function(window, videojs) {
      var player = window.player = ctyunplayer('ctyun-player');
      player.width(720);
      player.height(450);
      player.setUrl("/static/364.flv");
      player.setFloatingComments(data);
    }(window, window.videojs));

    function setPrefix() {
        let value = document.getElementById('prefixUrl').value;
        player.setPrefix(value);
    }
    function setAppId() {
    	let value = document.getElementById('appId').value;
    	player.setAppId(value);
    }
    function setFileId() {
    	let value = document.getElementById('fileId').value;
    	player.setFileId(value);
    }
    function setPlayableVideoDuration() {
    	let value = document.getElementById('videoDuration').value;
    	player.setPlayableVideoDuration(value);
    }
    function setStartAd() {
    	let value = document.getElementById('startAdUrl').value;
    	player.setStartAd(value);
    }
    function setStartAdVideoId() {
    	let value = document.getElementById('startAdId').value;
    	player.setStartAdVideoId(value);
    }
    function setUrl() {
    	let value = document.getElementById('mainUrl').value;
    	player.setUrl(value);
    }
    function setPoster() {
    	let value = document.getElementById('posterUrl').value;
    	player.setPoster(value);
    }
    function setEndAd() {
    	let value = document.getElementById('endAdUrl').value;
    	player.setEndAd(value);
    }
    function setEndAdVideoId() {
    	let value = document.getElementById('endAdId').value;
    	player.setEndAdVideoId(value);
    }
    function setPausedAd() {
    	let value = document.getElementById('pauseAdUrl').value;
    	player.setPausedAd(value);
    }
    function load() {
    	player.load();
    }
    function play() {
    	player.play();
    }
    function playNoAd() {
    	player.play(true);
    }
    function pause() {
    	player.pause();
    }
    function stop() {
    	player.stop();
    }
    function seekTo() {
    	let value = document.getElementById('seekSec').value;
    	player.seekTo(value);
    }
    function getDuration() {
    	alert(player.getDuration());
    }
    function getCurrentPosition() {
    	alert(player.getCurrentPosition());
    }
    function getBufferedRange() {
    	alert("from:" + player.getBufferedRange().from + ", to:" + player.getBufferedRange().to);
    }
    function getBufferedEnd() {
    	alert(player.getBufferedEnd());
    }
    function getBufferedPercentage() {
    	alert(player.getBufferedPercentage());
    }
    function setVolume() {
    	let value = document.getElementById('volume').value;
    	player.setVolume(value);
    }
    function isMuted() {
    	alert(player.isMuted());
    }
    function enterfullScreen() {
    	player.enterfullScreen();
    }
    function existFullScreen() {
    	player.existFullScreen();
    }
    function setSpeed() {
    	let value = document.getElementById('speed').value;
    	player.setSpeed(value);
    }
    function isPlaying() {
    	alert(player.isPlaying());
    }
    function isStop() {
    	alert(player.isStop());
    }
    function isStartAdPlaying() {
    	alert(player.isStartAdPlaying());
    }
    function isEndAdPlaying() {
    	alert(player.isEndAdPlaying());
    }
    function isPausedAdShow() {
    	alert(player.isPausedAdShow());
    }
    function stopStartAd() {
      player.stopStartAd();
    }
    function stopEndAd() {
      player.stopEndAd();
    }
    function hidePausedAd() {
      player.hidePausedAd();
    }

    (function(window){
    	player.onLoadStart(function(){
    		console.log("onLoadStart：视频开始加载事件");
    	});
    	player.onPlay(function(){
    		console.log("onPlay：视频开始播放事件");
    	});
    	player.onPlayMain(function(){
    		console.log("onPlayMain：主视频开始播放事件");
    	});
    	player.onStopMain(function(){
    		console.log("onStopMain：主视频停止播放事件");
    	});
    	player.onPause(function(){
    		console.log("onPause：暂停播放事件");
    	});
    	player.onSeekedTo(function(){
    		console.log("onSeekedTo：进度条跳跃事件");
    	});
    	player.onStop(function(){
    		console.log("onStop：停止播放事件");
    	});
    	player.onEnterFullScreen(function(){
    		console.log("onEnterFullScreen：进入全屏事件");
    	});
    	player.onExitFullScreen(function(){
    		console.log("onExitFullScreen：退出全屏事件");
    	});
    	player.onError(function(){
    		console.log("onError：发生错误事件");
    	});
    })(window);

    document.getElementById('btn').addEventListener('click', function() {
      let value = document.getElementById('text').value;
      let obj = { value };
      player.addFloatingComments(obj);
      document.getElementById('text').value = "";
    });
  </script>
  <style>
  	#test-button-area {
  		width: 450px;
    	height: 650px;
    	background: rgba(188, 199, 214, 0.5);
    	margin-top: -480px;
    	margin-left: 750px;
    	overflow: scroll;
  	}
  	#test-button-area > * {
  		margin-bottom: 5px;
  	}

  	#test-button-area > input {
  		width: 220px;
  	}
  </style>
  </body>
</html>
